Smart Filter Editor
現状は ThinEngineと組み合わせて使うことができます。Babylon.js Playgroundから呼び出す方法は提供されていません。（投票が集まれば対応してもらえるかもしれません。） https://scrapbox.io/files/68311b7b0b7b1fdb2dcbc3a8.png
https://scrapbox.io/files/68311b6ca55927ee1d61c2e7.png
MCP Server として使う方法
1. 準備（初回のみ）
code:PowerShell
cd C:\github\Babylon.js
npm install
Smart Filters 固有: エディタは Smart Filters 系パッケージのビルド済み dist を参照するが、
これらはルート npm start の watch 対象に含まれないため、初回に専用スクリプトでビルドする:
code:PowerShell
npm run build:source:smart-filters
これは「GLSL からの .block.ts / .fragment.ts 生成（buildShaders）→ tsconfig.smartFilters.json で一括コンパイル」を行う。
※ npm run build -w @dev/smart-filters-blocks 等の個別ビルドはシェーダー生成が走らないため
TS2307（.block.js / .fragment.js が見つからない）で失敗する。必ず上記スクリプトを使うこと。
シェーダーを編集しながら使う場合は npm run watch:assets:smart-filters ＋ npm run watch:source:smart-filters。
2. MCP クライアントへの登録
方法A（推奨）: npm 公開版 @babylonjs/mcp-servers を npx で起動
claude_desktop_config.json の例:
code:json
"mcpServers": {
"babylonjs-smart-filters": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
}
}
方法B: ローカルビルド版（サーバー改造・未リリース変更を試す場合のみ）
code:PowerShell
npm run build -w @tools/smart-filters-mcp-server
code:json
"mcpServers": {
"babylonjs-smart-filters": {
"command": "node",
}
}
登録後、クライアントを再起動。
3. エディタの起動（毎回）
ターミナルを2つ使う:
code:PowerShell
# ターミナル1: babylonServer（初回はビルドに時間がかかる）
cd C:\github\Babylon.js
npm start
# ターミナル2: Smart Filter Editor（パッケージ名は @tools/smart-filters-editor）
cd C:\github\Babylon.js
npm run serve -w @tools/smart-filters-editor
Vite が表示する URL をブラウザで開く（デフォルトポート 1346、環境変数 SFE_PORT で変更可）。
4. MCP セッションへの接続
AI 側で create_filter_graph（または start_session）を実行すると、セッション URL が返る:
エディタの MCP セッション接続パネルに貼り付けて接続
以後、AI がブロックを追加・接続するとエディタにリアルタイム反映される
5. 基本ワークフロー
code:text
create_filter_graph → add_block（入力テクスチャ/値 → エフェクトブロック）
→ connect_blocks → set_block_properties
→ validate_graph → export_filter_graph_json